<template>
	<el-scrollbar style="height: 100%;">
		<div :class="loadingBox ? 'tableMain-loading':'tableMain'" v-show="!loadingBox">
			<div v-for="(item,indexs) in rankArr" :key="indexs">
				<div style="text-align: center;margin-top: 60px; font-weight: 600; font-size: 16px;">{{indexs+1}}区</div>
				<div class="scoreBox">
					<ul :class="'rank'+ roundsIndex" v-for="(rounds,roundsIndex) in item" :key="roundsIndex">
						<!-- {{roundsList[roundsIndex].roundsName}} -->
						<li v-if="pdfLoading_hideRounds(roundsIndex)" class="roundName"></li>
						<li v-for='(item,index) in rounds' :key='item.id'>
							<span class='name'>
								<div class="name-box">
									<div :class="item.seed_num||loadingBox ? 'name-box-top-blod':'name-box-top'">
										<div class="name-box-top-site" v-if="item.site">{{item.site}}</div>
										<div class="name-box-top-name" :class="{'longWord' : (item.user_name ? item.user_name.length : 0)>10 && roundsIndex==0,'longWordTow' : (item.user_name ? item.user_name.length : 0)>10 && roundsIndex==1}">
											<span v-if="item.team_name">{{item.team_name}}</span>
											<span v-else>{{item.user_name}}</span>
											<div v-if="item.seed_num" style="display: flex;">
												(<div style="color: red">{{item.seed_num}}</div>)
											</div>
										</div>
									</div>
									<div style="position: absolute;top: 55px;width: 50%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
										<div style="display: flex;margin-left: 4px;" v-for="(game,gameIndex) in item.score">
											<div>{{item|Score(game)}}</div>
											<div v-if="game.tiebreak">({{game.tiebreak}})</div>
										</div>
										<span style="margin-left: 2px;" v-if="item.waiver_user!==0">弃</span>
									</div>
									<div :class="loadingBox ? 'name-box-bot-limit-loading':'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
										{{item.one_limit|player_limit}}
									</div>
								</div>
							</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div v-if="loadingBox" v-for='(item,pageIndex) in pdfs' :key='pageIndex' :id="'pdfDom'+pageIndex" :class="{'mtss':sliceLength==13}" style="height: 1950px;padding-top: 20px;">
			<layoutTableHeader :match_name="MatchInfoLayout.com_name" :match_time="MatchInfoLayout.com_time" :match_location="MatchInfoLayout.address"
			 :referee_name="MatchInfoLayout.referee_name" :project_name="project_name" id="pdfDomHeaders" :logo_url="MatchInfoLayout.logo" />
			<div :class="loadingBox ? 'tableMain-loading':'tableMain'">
				<div v-for="(item,indexs) in rankArr.slice(pageIndex*sliceLength,(pageIndex+1)*sliceLength)" :key="indexs" :class="{'mtfourspacing':sliceLength==6,'mtEightspacing':sliceLength==3}">
					<!-- <div style="text-align: center;margin-top: 60px; font-weight: 600; font-size: 16px;width: 50px;">{{item[0][0].second_order+1}}区</div> -->
					<div class="scoreBox">
						<div style="text-align: center;font-weight: 700;width: 50px;margin-right: 100px;font-size: 18px;" :class="{'mt':sliceLength==13,'mtfour':sliceLength==6,'mtEight':sliceLength==3}">{{item[0][0].second_order+1}}区</div>
						<ul :class="'rank'+ roundsIndex" v-for="(rounds,roundsIndex) in item" :key="roundsIndex">
							<!-- {{roundsList[roundsIndex].roundsName}} -->
							<li v-if="pdfLoading_hideRounds(roundsIndex)" class="roundName"></li>
							<li v-for='(item,index) in rounds' :key='item.id'>
								<span class='name'>
									<div class="name-box">
										<div :class="item.seed_num||loadingBox ? 'name-box-top-blod':'name-box-top'">
											<div class="name-box-top-site" v-if="item.site">{{item.site}}</div>
											<div class="name-box-top-name" :class="{'longWord' : (item.user_name ? item.user_name.length : 0)>10 && roundsIndex==0,'longWordTow' : (item.user_name ? item.user_name.length : 0)>10 && roundsIndex==1}">
												<span v-if="item.team_name">{{item.team_name}}</span>
												<span v-else>{{item.user_name}}</span>
												<div v-if="item.seed_num" style="display: flex;">
													(<div style="color: red">{{item.seed_num}}</div>)
												</div>
											</div>
										</div>
										<div style="position: absolute;top: 58px;width: 50%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
											<div style="display: flex;margin-left: 4px;" v-for="(game,gameIndex) in item.score">
												<div>{{item|Score(game)}}</div>
												<div v-if="game.tiebreak">({{game.tiebreak}})</div>
											</div>
											<span style="margin-left: 2px;" v-if="item.waiver_user!==0">弃</span>
										</div>
										<div :class="loadingBox ? 'name-box-bot-limit-loading':'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
											{{item.one_limit|player_limit}}
										</div>
									</div>
								</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div style="display: flex;justify-content: center;width: 70%;margin: 0 auto;height: 217px;" :class="{'mts':sliceLength==13}">
				<div v-if="gridtable.length <= 5 && pdfs == 1" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 80%;height: 100%">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<!-- gridtable.length>=4 ? gridtable.slice(0,4) : -->
						<tr v-for="(item, index) in gridtable" :key="index">
							<td>{{item.seed_site}}</td>
							<td>{{item.name}}</td>
							<td>{{item.sign}}</td>
							<td>{{item.company}}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 20%;height: 100%">
						<tr>
							<th style="height: 10px;line-height: 10px;">抽签时间</th>
						</tr>
						<tr>
							<td style="height: 12px;line-height: 12px;text-align: center;font-weight: 700;">{{drawTimes}}</td>
						</tr>
						<tr>
							<th>抽签代表</th>
						</tr>
						<tr>
							<td></td>
						</tr>
						<tr>
							<th>裁判长签名</th>
						</tr>
						<tr>
							<td style="font-weight: 700;">{{name}}</td>
						</tr>
					</table>
				</div>
				<div v-if="gridtable.length > 5 && pdfs == 1" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 80%;height: 100%">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice(pageIndex*5,(pageIndex+1)*5)" :key="index">
							<td>{{item.seed_site}}</td>
							<td>{{item.name}}</td>
							<td>{{item.sign}}</td>
							<td>{{item.company}}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 20%;height: 100%">
						<tr>
							<th style="height: 7px;line-height: 7px;">抽签时间</th>
						</tr>
						<tr>
							<td style="text-align: center;font-weight: 700">{{drawTimes}}</td>
						</tr>
						<tr>
							<th>抽签代表</th>
						</tr>
						<tr>
							<td></td>
						</tr>
						<tr>
							<th>裁判长签名</th>
						</tr>
						<tr>
							<td style="font-weight: 700;">{{name}}</td>
						</tr>
					</table>
				</div>
				<div v-if="gridtable.length > 5 && pdfs > 1 && pageIndex < gridtablepage" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 40%;height: 100%">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice((2*pageIndex)*6,(2*pageIndex+1)*6)" :key="index">
							<td>{{item.seed_site}}</td>
							<td>{{item.name}}</td>
							<td>{{item.sign}}</td>
							<td>{{item.company}}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 40%;height: 100%">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice((2*pageIndex+1)*6,(2*pageIndex+2)*6)" :key="index">
							<td>{{item.seed_site}}</td>
							<td>{{item.name}}</td>
							<td>{{item.sign}}</td>
							<td>{{item.company}}</td>
						</tr>
					</table>
					<table class="gridtable" style="width: 20%;height: 100%">
						<tr>
							<th style="height: 10px;line-height: 10px;">抽签时间</th>
						</tr>
						<tr>
							<td style="height: 12px;line-height: 12px;text-align: center;font-weight: 700">{{drawTimes}}</td>
						</tr>
						<tr>
							<th>抽签代表</th>
						</tr>
						<tr>
							<td></td>
						</tr>
						<tr>
							<th>裁判长签名</th>
						</tr>
						<tr>
							<td style="font-weight: 700;">{{name}}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</el-scrollbar>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import layoutTableHeader from './layoutTableHeader'
	export default {
		data() {
			return {
				rankList: [
					// rank:[],
					// rankFirst:[1,2,3,4,5,6,7,8],
					// rankSecond:[1,2,3,4],
					// rankThird:[1,2],
					// rankFourth:[1],
				],
				roundsList: [{}],
				isGroup: 0,
			}
		},
		// destroyed(){
		//      this.LayoutKnockResult = []
		// },
		components: {
			layoutTableHeader
		},
		props: {
			LayoutKnockResult: Array,
			loadingBox: Boolean,
			project_name: String,
			seed_site: String,
			drawTime: Number,
			name: String
		},
		filters: {
			player_limit(val) {
				return val.substring(0, 8)
			},
			secondSite(val) {
				if (!val) return ''
				if (!isNaN(Number(val))) return val
				return val.substring(1, val.length)
			},
			Score(item, val) {
				//高比分在前
				// if (val.top > val.bot) return `${val.top}${val.bot}`
				// if (val.top < val.bot) return `${val.bot}${val.top}`
				if (item.user_sign_id == item.sign_id_a) {
					return `${val.top}${val.bot}`
				} else {
					return `${val.bot}${val.top}`
				}

			}
		},
		watch: {
			loadingBox(val) {},
		},
		computed: {
			...mapState({
				VuexKnockResult: 'LayoutKnockResult',
				MatchInfoLayout: 'MatchInfoLayout',
			}),
			drawTimes() {
				let unixtime = this.drawTime
				let unixTimestamp = new Date(unixtime * 1000)
				let Y = unixTimestamp.getFullYear()
				let M = ((unixTimestamp.getMonth() + 1) >= 10 ? (unixTimestamp.getMonth() + 1) : '0' + (unixTimestamp.getMonth() + 1))
				let D = (unixTimestamp.getDate() >= 10 ? unixTimestamp.getDate() : '0' + unixTimestamp.getDate())
				let h = (unixTimestamp.getHours() >= 10 ? unixTimestamp.getHours() : '0' + unixTimestamp.getHours())
				let m = (unixTimestamp.getMinutes() >= 10 ? unixTimestamp.getMinutes() : '0' + unixTimestamp.getMinutes())
				let s = (unixTimestamp.getSeconds() >= 10 ? unixTimestamp.getSeconds() : '0' + unixTimestamp.getSeconds())
				let toDay = Y + '-' + M + '-' + D + '  ' + h + ':' + m + ':' + s
				return toDay
			},
			sliceLength(){
				let merchant = null
				if (this.LayoutKnockResult[0][0].length == 2) {
					merchant = 13
				}
				if (this.LayoutKnockResult[0][0].length == 4) {
					merchant = 6
				}
				if (this.LayoutKnockResult[0][0].length == 8) {
					merchant = 3
				}
				return merchant
			},
			gridtablepage() {
				console.log(this.seed_site.split('，').length)
				// let page = parseInt(this.seed_site.split('，').length / 4) + 1
				let page = this.seed_site.split('，').length%12 == 0 ? this.seed_site.split('，').length /12 : parseInt(this.seed_site.split('，').length / 12) + 1
				console.log(page)
				return page
			},
			gridtable() {
				let seed = this.seed_site == '没有种子' ? false : true
				if (seed) {
					let substrArr = []
					let seed_site = this.seed_site.split('，')
					let surplus
					for (let i = 0; i < seed_site.length; i++) {
						let obj = {}
						obj.seed_site = seed_site[i].split("-")[0]
						obj.name = seed_site[i].split("(")[0].split("-")[1]
						obj.sign = seed_site[i].split("(")[1].split(")")[0]
						obj.company = seed_site[i].split("-")[2]
						substrArr.push(obj)
					}
					substrArr.sort(this.compare("seed_site"));
					if (seed_site.length / 6 != 0 && seed_site.length > 6) {
						surplus = 12 - seed_site.length%6
						for (let i = 0; i < surplus; i++) {
							let obj = {}
							obj.seed_site = ''
							obj.name = ''
							obj.sign = ''
							obj.company = ''
							substrArr.push(obj)
						}
					} else {
						surplus = 6 - seed_site.length%6
						for (let i = 0; i < surplus; i++) {
							let obj = {}
							obj.seed_site = ''
							obj.name = ''
							obj.sign = ''
							obj.company = ''
							substrArr.push(obj)
						}
					}

					return substrArr
				} else {
					let substrArr = []
					return substrArr
				}
			},
			pdfs() {
				let merchant = null
				if (this.LayoutKnockResult[0][0].length == 2) {
					merchant = this.LayoutKnockResult.length%13 == 0 ? this.LayoutKnockResult.length/13 : parseInt((this.LayoutKnockResult.length/13))+1
				}
				if (this.LayoutKnockResult[0][0].length == 4) {
					merchant = this.LayoutKnockResult.length%6 == 0 ? this.LayoutKnockResult.length/6 : parseInt((this.LayoutKnockResult.length/6))+1
				}
				if (this.LayoutKnockResult[0][0].length == 8) {
					merchant = this.LayoutKnockResult.length%3 == 0 ? this.LayoutKnockResult.length/3 : parseInt((this.LayoutKnockResult.length/3))+1
				}
				console.log(merchant)
				return merchant
			},
			pdfLoading_hideRounds() {
				return (roundsIndex) => {
					let roundsLength = this.rankArr.length - 1 - 1
					if (this.rankArr.length > 6 && (roundsIndex - roundsLength) > 3) return false //64 128 256
					if (roundsIndex > 0) return true
					return false
				}
			},
			rankArr() {
				//let val = JSON.parse(JSON.stringify(this.VuexKnockResult))//要么vuex 要么传参 混搭出问题 报错的坑也在这里 后人留意...
				let val = JSON.parse(JSON.stringify(this.LayoutKnockResult))
				let arrAll = []
				this.roundsList = [{}]
				console.log(val)
				for (var x = 0; x < val.length; x++) {
					let arr = []
					let rounds = 0
					let arrLength = 0;
					this.rankList = []

					for (let j in val[x][0]) {
						if (typeof val[x][0][j] == "object") {
							arr.push(val[x][0][j])
							arrLength = arrLength + 1
						}
					}
					rounds = Math.log(arrLength) / Math.log(2)
					this.rankList.push(arr)
					arrLength = arrLength / 2
					for (let i = 0; i < rounds; i++) {
						let round = []
						if (i == rounds - 1) {
							this.roundsList.push({
								roundsName: '决赛'
							})
						} else {
							if (i == rounds - 2) {
								this.roundsList.push({
									roundsName: '半决赛'
								})
							} else {
								let num = i + 1
								this.roundsList.push({
									roundsName: '第' + num + '轮'
								})
							}
						}
						for (let j = 0; j < arrLength; j++) {
							round.push({
								user_name: '',
								site: ''
							})
						}
						arrLength = arrLength / 2
						this.rankList.push(round)
					}
					//抛开第一轮 进入后几轮
					for (let round in val[x]) {
						if (round > 0) {
							for (let battle in val[x][round]) {
								// console.log('val[round][battle].field',val[x][round][battle].field)
								this.rankList[round][parseInt(val[x][round][battle].field) - 1] = val[x][round][battle]
							}
						}
					}
					//第一轮轮空自动进第二轮
					for (let playerIndex in val[x][0]) {
						if (val[x][0][playerIndex].user_name === "轮空位" || val[x][0][playerIndex].user_name === "轮空") {
							//odd  even
							let nextRoundPlayer = playerIndex % 2 == 0 ? parseInt(playerIndex) + 1 : parseInt(playerIndex) - 1 //判断奇偶
							let nextRoundIndex = Math.ceil((parseInt(playerIndex) + 1) / 2) - 1
							this.rankList[1][nextRoundIndex] = val[x][0][nextRoundPlayer]
						}
					}
					// console.log(this.rankList)
					arrAll.push(this.rankList)
				}
				return arrAll
			},
		},
		methods: {
			compare(property) { //按对象属性值排序
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.mtss .tableMain-loading{
		margin-top: 0px !important
	}
	.mts{
		margin-top: 20px !important
	}
	.mtEightspacing{
		margin-bottom: 30px;
	}
	.mtfourspacing{
		margin-bottom: 20px;
	}
	.mtEight{
		margin-top: 238px;
	}
	.mtfour{
		margin-top: 128px;
	}
	.mt{
		margin-top: 70px;
	}
	table.gridtable {
		width: 100%;
		font-family: verdana, arial, sans-serif;
		font-size: 11px;
		color: #333333;
		border-width: 1px;
		border-color: #666666;
		border-collapse: collapse;
	}

	table.gridtable th {
		height: 7px;
		line-height: 7px;
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #dedede;
	}

	table.gridtable td {
		line-height: 15px;
		height: 15px;
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #ffffff;
	}
	.longWord {
		overflow: visible !important;
		;
		position: absolute;
		top: -7px;
		left: 23px;
		text-align: left;
		line-height: 1 !important;
		font-size: 12px;
	}

	.longWordTow {
		overflow: visible !important;
		;
		text-align: left;
		line-height: 1 !important;
		font-size: 12px;
	}

	.flip-list-move {
		transition: transform 1s;
	}

	.isGroup {
		border-right: 1px solid #eaeaea;
		border-bottom: 0;
		background-color: #fff;
		color: #409EFF !important;
	}

	.isGroup1 {
		border-right: 1px solid #eaeaea;
		border-left: 1px solid #eaeaea;
		border-bottom: 0;
		background-color: #fff;
		color: #409EFF !important;
	}

	.name-box {
		display: flex;
		flex-direction: column;
		height: 55px;
	}

	.name-box-top {
		height: 40%;
		display: flex;
		margin-top: 15%;
		align-items: baseline;
	}

	.name-box-top-blod {
		height: 40%;
		display: flex;
		font-weight: bold;
		margin-top: 15%;
		align-items: baseline;
	}

	.name-box-top-site {
		margin-left: 4px;
		text-align: right
	}

	.name-box-top-name {
		margin-left: 5px;
		display: flex;
		align-items: baseline;
		overflow: hidden;
	}

	.name-box-bot-limit {
		font-size: 8px;
		display: flex;
		height: 50%;
		margin-left: 10%;
		padding-left: 5px;
		overflow: hidden;
	}

	.name-box-bot-limit-loading {
		font-size: 15px;
		display: flex;
		height: 50%;
		margin-left: 10%;
		margin-top: 5px;
		padding-left: 5px;
		overflow: hidden;
	}

	.tableMain {
		margin-top: 20px;
		padding: 0 20px;
		.scoreBox {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-bottom: 30px;

			.roundName {
				font-size: 15px;
			}

			.rank0 {
				padding-left: 150px;

				li {
					width: 120px;
					height: 40px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						height: 40px;
						line-height: 40px;
						width: 150px;
						text-align: center;
						position: absolute;
						bottom: -15px;
						left: -150px;
						top: 30px;

						.name-box {
							display: flex;
							flex-direction: column;
							height: 40px;
						}

						.name-box-top {
							height: 20px;
							display: flex;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-blod {
							height: 20px;
							display: flex;
							font-weight: bold;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-site {
							margin-left: 0;
							width: 15%;
							line-height: 20px;
							text-align: right
						}

						.name-box-top-name {
							margin-left: 5px;
							height: 20px;
							line-height: 20px;
							display: flex;
							align-items: baseline;
							width: 85%;
						}

						.name-box-bot-limit {
							font-size: 8px;
							display: flex;
							height: 20px;
							line-height: 20px;
							margin-left: 15%;
							padding-left: 5px;
						}

						.name-box-bot-limit-loading {
							font-size: 15px;
							display: flex;
							height: 20px;
							margin-left: 10%;
							margin-top: 5px;
							padding-left: 5px;
						}
					}
				}

				li:nth-child(even) {
					//奇数
					border-right: 1px solid #727272;
				}

				li:nth-child(odd) {
					//偶数
					width: 121px;
				}
			}

			.rank1 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 81px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 61px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank2 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 163px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 102px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank3 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 327px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 182px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank4 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 652px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 344px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank5 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 1296px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 682px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank6 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 2592px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 1330px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank7 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 5184px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 2626px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank8 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 10496px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 5260px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}
		}
	}

	.tableMain-loading {
		margin-top: 20px;
		padding: 0 20px;
		padding-bottom: 35px;

		.scoreBox {
			width: 100%;
			display: flex;
			justify-content: center;
			// padding-bottom: 30px;
			font-size: 18px;

			.roundName {
				font-size: 20px;
			}

			.rank0 {
				padding-left: 180px;

				li {
					width: 120px;
					height: 55px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						height: 40px;
						line-height: 40px;
						width: 180px;
						text-align: center;
						position: absolute;
						bottom: -15px;
						left: -180px;
						top: 45px;

						.name-box {
							display: flex;
							flex-direction: column;
							height: 40px;
						}

						.name-box-top {
							height: 20px;
							display: flex;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-blod {
							height: 20px;
							display: flex;
							font-weight: bold;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-site {
							width: 15%;
							line-height: 20px;
							text-align: right
						}

						.name-box-top-name {
							margin-left: 5px;
							height: 20px;
							line-height: 20px;
							width: 85%;
							display: flex;
							align-items: baseline;
						}

						.name-box-bot-limit {
							font-size: 8px;
							display: flex;
							height: 20px;
							line-height: 20px;
							margin-left: 15%;
							padding-left: 5px;
						}

						.name-box-bot-limit-loading {
							font-size: 15px;
							display: flex;
							height: 20px;
							margin-left: 15%;
							// margin-top: 5px;
							margin-top: 3px;
							line-height: 20px;
							padding-left: 5px;
						}
					}
				}

				li:nth-child(even) {
					//奇数
					border-right: 2px solid #727272;
				}

				li:nth-child(odd) {
					//偶数
					width: 121px;
				}
			}

			.rank1 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 112px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 204px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 84px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank2 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 226px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 140px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank3 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 454px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 251px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank4 {
				// border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 908px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 478px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank5 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 1827px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 924px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank6 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 3646px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 1844px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank7 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 7287px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 3676px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank8 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 14336px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 7327px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}
		}
	}
</style>
